<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="admin/head :: head"></div>

    <title>登录</title>

    <style>
        .flip-container {
            height: 800px;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .flip {
            position: relative;
            transition: 0.6s;
            transform-style: preserve-3d;
        }

        .front, .back {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .front {
            z-index: 2;
        }

        .back {
            transform: rotateY(-180deg);
        }

        /*.flip-container:hover .flip {
            transform: rotateY(180deg);
        }*/
    </style>

</head>
<body class="login-bg">


<div class="flip-container">
    <div class="flip">
        <div class="front">
            <div class="login layui-anim layui-anim-up">
                <div class="message">巨桃游娱-管理登录</div>
                <div class="darkbannerwrap"></div>

                <form id="form" class="layui-form" th:action="@{/admin/login}" th:method="post">

                    <label class="x-red" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION ne null ? (session.SPRING_SECURITY_LAST_EXCEPTION.message eq 'Bad credentials' ? '用户名或密码错误' : session.SPRING_SECURITY_LAST_EXCEPTION.message) : ''}">

                    </label>
                    <hr class="hr15" th:hidden="${session.SPRING_SECURITY_LAST_EXCEPTION eq null or session.SPRING_SECURITY_LAST_EXCEPTION.message eq null}">

                    <input name="username" placeholder="用户名" type="text" lay-verify="username" class="layui-input" value="" autocomplete="off">
                    <hr class="hr15">

                    <input name="password" lay-verify="password" placeholder="密码" type="password" class="layui-input" value="" autocomplete="off">
                    <hr class="hr15">

                    <div class="layui-input-inline" style="width: 49%;">
                        <input name="verification" lay-verify="verification" placeholder="验证码" type="text" class="layui-input" value="" autocomplete="off">
                    </div>
                    <div class="layui-input-inline" style="width: 49%;">
                        <img class="layui-form-label" style="width: 90%;" th:src="@{/api/validate_code}" th:onclick="'this.src = \'' + ${#request.getAttribute('ctx')} + '/api/validate_code?random=\' + Math.random()'"/>
                    </div>

                    <hr class="hr15">

                    <input class="layui-input" type="checkbox" name="remember-me" id="remember-me">
                    <label for="remember-me">记住</label>
                    <hr class="hr15">

                    <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
                    <hr class="hr20">

                    <!-- <a onclick="$('#form').addClass('flipper'); $('#register').show().css('transform', 'rotateY(-180deg)');">立即注册</a> -->
                </form>


            </div>
        </div>

        <div class="back">
            <div class="front">
                <div class="login layui-anim layui-anim-up">
                    <div class="message">巨桃游娱-管理注册</div>
                    <div class="darkbannerwrap"></div>
                    <form id="register" class="layui-form" th:action="@{/admin}"
                          th:method="post">

                        <label class="x-red" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION ne null ? (session.SPRING_SECURITY_LAST_EXCEPTION.message eq 'Bad credentials' ? '用户名或密码错误' : session.SPRING_SECURITY_LAST_EXCEPTION.message) : ''}">

                        </label>
                        <hr class="hr15" th:hidden="${session.SPRING_SECURITY_LAST_EXCEPTION eq null or session.SPRING_SECURITY_LAST_EXCEPTION.message eq null}">

                        <input name="username" placeholder="用户名" type="text" lay-verify="username" class="layui-input" value="" autocomplete="off">
                        <hr class="hr15">

                        <input name="password" lay-verify="password" placeholder="密码" type="password" class="layui-input" value="" autocomplete="off">
                        <hr class="hr15">

                        <div class="layui-input-inline" style="width: 49%;">
                            <input name="verification" lay-verify="verification" placeholder="验证码" type="text" class="layui-input" value="" autocomplete="off">
                        </div>
                        <div class="layui-input-inline" style="width: 49%;">
                            <img class="layui-form-label" style="width: 90%;" th:onload="'this.src = \'' + ${#request.getAttribute('ctx')} + '/api/validate_code?random=\' + Math.random()'" th:onclick="'this.src = \'' + ${#request.getAttribute('ctx')} + '/api/validate_code?random=\' + Math.random()'"/>
                        </div>

                        <hr class="hr15">

                        <input value="注册" lay-submit lay-filter="register" style="width:100%;" type="submit">
                        <hr class="hr20">
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>


<script>
    $(function () {
        form.username.focus();

        layui.use('form', function () {
            $ = layui.jquery;
            var form = layui.form;

            form.verify({
                username: [/(.+){4,18}$/, '请输入用户名'],
                password: [/(.+){1}$/, '请输入密码'],
                verification: [/(.+){4}$/, '请输入验证码'],
            })

        });
    })
</script>
<!-- 底部结束 -->
</body>
</html>